<template>
	<view>
		<view class="coupon-list-window" :class="coupon.coupon == true ? 'on' : ''">
			<view v-if="!orderShow" class="nav acea-row row-around">
				<view
					:class="['acea-row', 'row-middle', type === 1 ? 'on' : '']"
					@click="setType(1)"
					>{{ $t(`page.users.userCoupon.navList[${0}].name`) }}</view
				>
				<view
					:class="['acea-row', 'row-middle', type === 2 ? 'on' : '']"
					@click="setType(2)"
					>{{ $t(`page.users.userCoupon.navList[${1}].name`) }}</view
				>
			</view>
			<view
				class="coupon-list"
				:style="{ 'margin-top': !orderShow ? '0' : '50rpx' }"
			>
				<block v-if="coupon.list.length">
					<!-- <view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list" :key='index'> -->
					<view
						class="item acea-row row-center-wrapper"
						v-for="(item, index) in coupon.list"
						@click="getCouponUser(index, item.id)"
						:key="index"
					>
						<view
							class="money acea-row row-column row-center-wrapper"
							:class="item.isUse ? 'moneyGray' : 'main_bg'"
						>
							<view
								><statistic :value="item.money" :currency="item.currency"
							/></view>
							<view class="pic-num"
								>{{ $t(`page.index.couponDesc`)
								}}<statistic :value="item.minPrice" :currency="item.currency"
							/></view>
						</view>
						<view class="text">
							<view class="condition line2">
								<span>{{ item.name }}</span>
							</view>
							<span
								class="font-mini font_color"
								:class="
									item.validStr === 'unusable' ||
									item.validStr === 'overdue' ||
									item.validStr === 'notStart'
										? 'bg-color-huic'
										: 'bg-color-check'
								"
								v-if="item.useType === 1"
								>{{ $t(`page.users.userCoupon.general`) }}</span
							>
							<span
								class="font-mini font_color"
								:class="
									item.validStr === 'unusable' ||
									item.validStr === 'overdue' ||
									item.validStr === 'notStart'
										? 'bg-color-huic'
										: 'bg-color-check'
								"
								v-else-if="item.useType === 2"
								>{{ $t(`page.users.userCoupon.goods`) }}</span
							>
							<span
								class="font-mini font_color"
								:class="
									item.validStr === 'unusable' ||
									item.validStr === 'overdue' ||
									item.validStr === 'notStart'
										? 'bg-color-huic'
										: 'bg-color-check'
								"
								v-else-if="item.useType === 3"
								>{{ $t(`page.users.userCoupon.cate`) }}</span
							>
							<view class="data acea-row row-between-wrapper">
								<view v-if="item.day > 0"
									>{{ $t(`page.users.userCoupon.valid`) }} {{ item.day }}
									{{ $t(`page.users.userCoupon.day`) }}</view
								>
								<view v-else>{{
									item.useStartTimeStr && item.useEndTimeStr
										? item.useStartTimeStr + " - " + item.useEndTimeStr
										: ""
								}}</view>
								<view class="bnt gray" v-if="item.isUse == true">{{
									$t(`page.users.userCoupon.received`)
								}}</view>
								<view class="bnt main_bg" v-else-if="orderShow">{{
									$t(`page.users.userCoupon.getUsers`)
								}}</view>
								<view class="bnt main_bg" v-else>{{
									$t(`page.users.userCoupon.receive`)
								}}</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 无优惠券 -->
				<view class="pictrue text-center" v-else>
					<image src="../../static/images/noCoupon.png"></image>
					<text class="text-ccc">{{ $t(`page.users.userCoupon.empty`) }}</text>
				</view>
			</view>
		</view>
		<view
			class="mask"
			catchtouchmove="true"
			:hidden="coupon.coupon == false"
			@click="close"
		></view>
	</view>
</template>

<script>
import { setCouponReceive } from "@/api/api.js";
import statistic from "@/components/statistic";
export default {
	components: { statistic },
	props: {
		//打开状态 0=领取优惠券,1=使用优惠券
		openType: {
			type: Number,
			default: 0,
		},
		coupon: {
			type: Object,
			default: function () {
				return {};
			},
		},
		//下单页面使用优惠券组件不展示tab切换页
		orderShow: {
			type: String,
			default: function () {
				return "";
			},
		},
		typeNum: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			type: 1,
		};
	},
	watch: {
		"coupon.type": function (val) {
			//监听props中的属性
			this.type = val;
		},
	},
	methods: {
		close: function () {
			this.type = this.typeNum;
			this.$emit("ChangCouponsClone");
		},
		getCouponUser: function (index, id) {
			let that = this;
			let list = that.coupon.list;
			if (list[index].isUse == true && this.openType == 0) return true;
			switch (this.openType) {
				case 0:
					//领取优惠券
					let ids = [];
					ids.push(id);
					setCouponReceive(id).then((res) => {
						that.$emit("ChangCouponsUseState", index);
						that.$util.Tips({
							title: that.$t(`message.tips.getSU`),
						});
						that.$emit("ChangCoupons", list[index]);
					});
					break;
				case 1:
					that.$emit("ChangCoupons", index);
					break;
			}
		},
		setType: function (type) {
			this.$emit("tabCouponType", type);
			this.type = type;
		},
	},
};
</script>

<style scoped lang="scss">
.coupon-list-window {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #f5f5f5;
	border-radius: 16rpx 16rpx 0 0;
	z-index: 555;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.coupon-list-window.on {
	transform: translate3d(0, 0, 0);
}

.coupon-list-window .title {
	height: 124rpx;
	width: 100%;
	text-align: center;
	line-height: 124rpx;
	font-size: 32rpx;
	font-weight: bold;
	position: relative;
}

.coupon-list-window .title .iconfont {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 35rpx;
	color: #8a8a8a;
	font-weight: normal;
}

.coupon-list-window .coupon-list {
	margin: 0 0 30rpx 0;
	height: 823rpx;
	overflow: auto;
	padding-top: 30rpx;
}

.coupon-list-window .pictrue {
	// width: 414rpx;
	// height: 336rpx;
	width: 280rpx;
	height: 260rpx;
	margin: 208rpx auto;
}

.coupon-list-window .pictrue image {
	width: 100%;
	height: 100%;
}

.pic-num {
	color: #fff;
	font-size: 24rpx;
}

.line-title {
	width: 90rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid rgba(232, 51, 35, 1);
	opacity: 1;
	border-radius: 20rpx;
	font-size: 20rpx;
	color: #e83323;
	margin-right: 12rpx;
}

.line-title.gray {
	border-color: #bbb;
	color: #bbb;
	background-color: #f5f5f5;
}

.nav {
	// position: absolute;
	// top: 0;
	// left: 0;
	width: 100%;
	height: 96rpx;
	border-bottom: 2rpx solid #f5f5f5;
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
	background-color: #ffffff;
	font-size: 30rpx;
	color: #999999;
}

.nav .acea-row {
	border-top: 5rpx solid transparent;
	border-bottom: 5rpx solid transparent;
}

.nav .acea-row.on {
	@include tab_border_bottom(theme);
	color: #282828;
}

.nav .acea-row:only-child {
	border-bottom-color: transparent;
}

.occupy {
	height: 106rpx;
}

.coupon-list .item {
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
}

.coupon-list .item .money {
	font-weight: normal;
}

.main_bg {
	@include main_bg_color(theme);
}
.select {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
.mask {
	z-index: 99;
}
</style>
